<template>
  <div class="star-rating">
    <el-icon v-for="(star, index) in 5" :key="index">
      <Star :class="{ 'filled': index < rating }" />
    </el-icon>
  </div>
</template>

<script setup>
import { Star } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
const props = defineProps({
  rating: {
    type: Number,
    default: 0
  }
})
</script>

<style scoped>
.star-rating {
  display: flex;
}
.filled {
  color: gold;
}
</style>